<!--
参数option
title：字段名称
value：字段值
keyword：字段名
-->
<template>
    <div class="set-name">
        <div class="setList" @click="set()">
            <div class="setList-left">{{option.title}}</div>
            <div class="setList-right">
                <span>{{ option.value }}</span>
                <i class="iconfont icon-jiantou"></i>
            </div>
        </div>
        <!--设置-->
        <div v-if="show" class="set-wrap">
            <div id="purchased">
                <div class="purchased-top">
                    <i class="iconfont icon-fanhui" @click="close"></i>
                    <span>{{option.title}}</span>
                </div>
            </div>

            <div class="settingList" v-if="option.keyword == 'nickName'">
                <input type="text" v-model="value"/>
                <div class="close" @click="clean()">×</div>
            </div>

            <div class="settingList" v-if="option.keyword == 'name'">
                <input type="text" v-model="value"/>
                <div class="close" @click="clean()">×</div>
            </div>

            <!--&lt;!&ndash;设置密码&ndash;&gt;-->
            <!--<div class="settingList">-->
                <!--<set-password :passCode="user.password" class="border-bottom"></set-password>-->
            <!--</div>-->

            <!--&lt;!&ndash;账号绑定&ndash;&gt;-->
            <!--<div class="hintpw">第三方账号绑定</div>-->

            <!--<div class="settingList">-->
                <!--<div class="setList border-bottom">-->
                    <!--<div class="setList-left">微信</div>-->
                    <!--<div class="setList-right">-->
                        <!--<i class="iconfont icon-fanhui"></i>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="setList">-->
                    <!--<div class="setList-left">QQ</div>-->
                    <!--<div class="setList-right">-->
                        <!--<i class="iconfont icon-fanhui"></i>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="setList">-->
                    <!--<div class="setList-left">微博</div>-->
                    <!--<div class="setList-right">-->
                        <!--<i class="iconfont icon-fanhui"></i>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</template>

<script>
    import {userService} from '../../service/userService'
    export default {
        data () {
            return {
                show:false,
                value:'',
                change:'',
                type:1
            }
        },
        props:['option'],
        watch:{
            option(cur,old){
                this.value=cur.value
            }
        },
        methods:{
            //更改字段
            save:function(){
                let that = this;
                let params={};
                params[that.option.keyword]=that.value
                userService.myCenterSet(params).then(function (res) {
                    that.change = true;
                    that.option.value = that.value
                    that.show = false;
                });
            },
            //清除按钮
            clean:function(){
                this.value = ''
            },
            set:function(){
                let that = this;
                that.show = true
                that.value = that.option.value
                if(that.value == '暂无'){
                    that.value = ''
                }
            },
            close:function(){
                let that = this;
                let params = {}
                if(that.value == ''){
                    that.show = false
                    return;
                }
                if(that.option.keyword == 'nickName'){
                    params = {nickName:that.value}
                }else{
                    params = {name:that.value}
                }
                userService.myCenterSet(params).then(function(res){
                    if(res.data.success){
                        that.option.value = that.value
                        that.show = false
                    }
                })
            },
        }
    }
</script>

<style lang="less">
.set-name{
    .settingName{
        width:100%;
        height:1.2rem;
        line-height:1.2rem;
        margin:0.27rem 0;
        padding:0 0.53rem;
        box-sizing: border-box;
        background:#fff;
        overflow: hidden;
        input{
            width:90%;
            height:100%;
            border:none;
            outline:none;
            font-size:14px;
        }
        i{
            float:right;
            color:#EEEEEE;
        }
    }
    .settingList{
        width:100%;
        height:1.46rem;
        padding:0 0.4rem;
        box-sizing: border-box;
        position: relative;
        input{
            width:90%;
            height:100%;
            float:left;
            border:none;
            outline: none;
        }
        .close{
            width: 0.5rem;
            height: 0.5rem;
            text-align: center;
            line-height: 0.5rem;
            background: #eee;
            color: #fff;
            font-size: 13px;
            border-radius: 100%;
            float: left;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0.53rem;
            margin: auto;
        }
    }
}

</style>